*{
    user-select: none;
}

#game{
    position: relative;
    height: 600px;
    width: 100%;
    background:url(../images/sky.png);
    background-position-x: 0px;
    // 溢出隐藏
    overflow: hidden;

    .bird{
        position: absolute;
        left: 50%;
        top: 235px;
        margin-left: -15px;
        width: 30px;
        height: 30px;
        background: url(../images/birds.png);
        // css过渡
        transition: top .3s linear;
    }

    .start{
        position: absolute;
        top: 295px;
        left: 50%;
        margin-left: -100px;
        width: 200px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-weight: bolder;
        cursor: pointer;
        // CSS3过渡
        transition: all .3s linear;

        &.start-white{
            color:#fff;
            font-size:24px;
        }

        &.start-blue{
            color:#09f;
            font-size:36px;
        }
    }

    .score{
        position: absolute;
        left: 50%;
        top: 50px;
        transform: translateX(-50%);
        font-size:20px;
        font-weight: bolder;
        color:#fff;

        // 隐藏
        display: none;

        z-index:2;
    }

    .mask{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: .7;
        background: #000;
        // 隐藏遮罩层
        display: none;
        z-index:2;
    }

    .end{
        position: absolute;
        left: 50%;
        top: 70px;
        transform: translateX(-50%);
        text-align: center;
        // 隐藏结束层
        display: none;
        z-index:2;


        .over{
            font-size: 30px;
            font-weight: bolder;
            color:red;
        }

        .result,.final-score{
            margin-top: 20px;
            color:#ff0;
            font-size:20px;
            font-weight: bold;
        }
    }

    .rank-list{
        color:#09f;
        margin-top: 20px;
        
        .rank-item{
            height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
            font-size:14px;
            
            .rank-degree{
                width: 14px;
                height: 14px;
                color:#fff;
                background: #8eb9f5;
                display: inline-block;
                line-height: 14px;
                font-size:12px;
                margin-right: 10px;

                &.first{
                    background: #f54545;
                }
                &.second{
                    background: #ff8547;
                }
                &.third{
                    background: #ffac38;
                }
            }

            .rank-score{
                width: 30px;
                display: inline-block;
            }
        }
        
    }

    .restart{
        color:#09f;
        font-size: 18px;
        font-weight: bolder;
        cursor: pointer;
    }

    .pipe{
        position: absolute;
        width: 52px;

        &.pipe-up{
            top: 0;
            background: url(../images/pipe2.png) center bottom;
        }

        &.pipe-down{
            background: url(../images/pipe1.png) center top;
            bottom: 0;
        }
    }

    
}